<template>
  <div id="liveGoodsRank">
    <choice2 @formatwdate="formatwdate" @formatwdate1="formatwdate1" show="month" :timing="8">
      <template>
        <!-- 商品种类 -->
        <!-- 商品来源 全部= -1 京东=0,淘宝=1,小店=2,天猫=3,苏宁=4,考拉=5-->
        <radio_group
          v-if="goodslist.length != 0"
          :radio_values="goodslist"
          v-model="source"
          title="商品类目"
          :tit="source"
        />
      </template>
    </choice2>
    <div class="list_public">
      <van-loading size="24px" vertical type="spinner" v-if="loading_01">拼命加载中...</van-loading>
      <van-list
        v-if="goodslist1.length"
        v-model="loading"
        :finished="finished"
        :finished-text="permissions || (!loading_01 && isQzss) ? '' : '我是有底线的～'"
        @load="onLoad"
        :immediate-check="false"
      >
        <div class="lp_box"
          v-for="(item, i) in goodslist1"
          @click="details1(item.proId)"
          :key="i + 't'"
        >
          <i class="rank_num" v-if="i <= 8">{{i+1}}</i>
          <i class="ordinary_num" v-else>{{i+1}}</i>
          <div class="lp_header">
            <div class="lp_cover_box">
              <div class="lp_cover">
                <img v-lazy="item.proLogo" v-errorImg:goods />
              </div>
            </div>
            <div class="lp_title">
              <div class="lp_title_item">
                <SourceIcon v-if="item.profrom == 0" sourceid="京东" class="sourceid"></SourceIcon>
                <SourceIcon v-if="item.profrom == 1" sourceid="淘宝" class="sourceid"></SourceIcon>
                <SourceIcon v-if="item.profrom == 2" sourceid="小店" class="sourceid"></SourceIcon>
                <SourceIcon v-if="item.profrom == 3" sourceid="天猫" class="sourceid"></SourceIcon>
                <SourceIcon v-if="item.profrom == 4" sourceid="苏宁" class="sourceid"></SourceIcon>
                <SourceIcon v-if="item.profrom == 5" sourceid="考拉" class="sourceid"></SourceIcon>
                <span>{{ item.proTitle }}</span>
              </div>
              <div class="lp_price_box">
                <template v-if="item.livePrice == item.maxPrice || item.livePrice > item.maxPrice">
                  <span>￥</span><strong>{{ format_num(item.livePrice) }}</strong>
                </template>
                <template v-if="item.livePrice < item.maxPrice">
                  <span>￥</span><strong>{{ format_num(item.livePrice) }}</strong><strong> - </strong><strong>{{ format_num(item.maxPrice) }}</strong>
                </template>
              </div>
            </div>
          </div>
          <div class="lp_footer">
            <div class="lpf_item"><strong>{{ format_num(item.volume) }}</strong><span>直播销量</span></div>
            <div class="lpf_item"><strong>{{ format_num(item.amount) }}</strong><span>直播销售额</span></div>
            <div class="lpf_item"><strong>{{ format_num(item.liveCount) }}</strong><span>关联直播</span></div>
          </div>
        </div>
        <p class="nothingWl" v-if="!loading_01 && isQzss && !permissions">
          榜单中没有你想要的结果?
          <span @click="gosearch">全站搜索</span>
        </p>
        <noPower v-if="permissions" :icon="false" :isRank="true" />
      </van-list>
    </div>
    <div class="bottom_Collection" v-if="!goodslist1.length && !loading_01">
      <img src="@/assets/three/noData.png" />
      <p class="nothingWl" v-if="isFilter">暂无数据</p>
      <p v-if="isQzss && !isFilter">
        榜单中没有你想要的结果?
        <span @click="gosearch">全站搜索</span>
      </p>
    </div>
  </div>
</template>

<script>
import radio_group from '@/component/screen1';
import choice2 from '@/component/choice_2';
import SourceIcon from '@/component/SourceIcon';
import errorImg from '@/assets/img/shop.png';
export default {
  name: 'liveGoodsRank',
  components: {
    radio_group,
    choice2,
    SourceIcon
  },
  data() {
    return {
      count: 0,
      source: '全部',
      goodslist: [],
      goodslist1: [],
      loading_01: false,
      loading: false,
      finished: false,
      keyword: '',
      page: 1,
      pageSize: 30,
      num: ['num1', 'num2', 'num3'],
      sstt: ['ss1', 'ss2', 'ss3', 'ss4'],
      permissions: false,
      Time: '',
      RankType: 1,
      CategoryId: 0,
      list: [],
      isQzss: false, // 是否显示 全站搜索的文案
      errorImg: errorImg,
      isFilter:false,
    };
  },
  computed: {
    defaultImg() {
      return 'this.src="' + errorImg + '"';
    }
  },
  props: ['valueSerach'],
  watch: {
    valueSerach(valueSerach) {
      if (valueSerach == '') {
        // 传空值时会代入空字符，不传时接口也不代入
        this.search('');
      }
    },
    source(newValue) {
      this.isFilter = (this.source != '全部'); //判断是否带筛选条件，用来区分展示暂无数据等状态
      this.page = 1;
      this.goodslist1 = [];
      if (newValue == '全部') {
        this.CategoryId = 0;
      } else {
        let CategoryId = this.list.filter(item => {
          if (item.categoryName == newValue) {
            let id = item.id;
            return id;
          }
        });
        this.CategoryId = CategoryId[0].id;
      }
      this.getData();
    },

    newvalue1(newvalue1) {
      this.keyword = newvalue1;
    }
  },
  created() {
    this.getProCategories();
  },
  methods: {
    gosearch(val) {
      this.$router.push({
        path: '/searchHistory',
        query: { value: 1, name: this.keyword }
      });
    },
    //或去年
    year() {
      var today = new Date();
      var tYear = today.getFullYear();
      return tYear;
    },
    //跳转
    details1(id) {
      this.$router.push({ path: '/goodsDetailsMain', query: { id } });
    },
    //去掉月日
    deltime(time) {
      var nowdate = new Date();
      var y = nowdate.getFullYear();
      var a = time.replace(/日/g, '-');
      var str = a.replace(/月/g, '-');
      var str1 = str.replace(/--/g, '-' + y + '-');
      var str1 = str1.substring(0, str1.length - 1);
      this.Time = y + '-' + str1;
    },
    //初始月
    month() {
      var nowdate = new Date();
      var y = nowdate.getFullYear();
      var m = nowdate.getMonth();
      var d = nowdate.getDate();
      var lastDay = new Date(y, m, 0);
      if (m < 10) {
        m = '0' + m;
      }
      if (d < 10) {
        d = '0' + d;
      }
      var newvalue = y + '-' + m + '-' + '01' + '-' + y + '-' + m + '-' + lastDay.getDate();
      this.Time = newvalue;
    },
    doHandleMonth(month) {
      var m = month;
      if (month.toString().length == 1) {
        m = '0' + month;
      }
      return m;
    },
    //当前日默认时间
    // //子组件传来的周月日榜
    // formatwdate(i, time) {
    //   console.log(i, time);
    //   this.page = 1;
    //   this.goodslist1 = [];
    //   if (i == '日榜') {
    //     this.Time = time;
    //     this.RankType = 1;
    //     this.getData();
    //   } else if (i == '周榜') {
    //     this.RankType = 2;
    //     this.deltime(time);
    //     this.getData();
    //   } else if (i == '月榜') {
    //     this.month();
    //     this.RankType = 3;
    //     this.getData();
    //   }
    // },
    // formatwdate1(i, time) {
    //   this.page = 1;
    //   this.goodslist1 = [];
    //   if (this.RankType == 3) {
    //     this.Time = time;
    //     this.getData();
    //   } else if (this.RankType == 2) {
    //     this.deltime(i);
    //     this.getData();
    //   } else {
    //     this.Time = this.year() + '-' + i;
    //     this.getData();
    //   }
    // },
     //子组件传来的周月日榜
    formatwdate(i, dateObj) {
      this.page = 1;
      this.goodslist1 = [];
      if (i == '日榜') {
        this.Time = dateObj.value;
        this.RankType = 1;
      } else if (i == '周榜') {
        // this.deltime(time);
        this.Time = dateObj.startDate+'-'+dateObj.endDate;
        this.RankType = 2;
      } else if (i == '月榜') {
        this.Time = dateObj.startDate+'-'+dateObj.endDate;
        this.RankType = 3;
      }
      this.getData();
    },
    formatwdate1(dateObj) {
      this.page = 1;
      this.goodslist1 = [];
      if(this.RankType == 1){ //日榜传一个值，周榜月榜传区间日期
        this.Time = dateObj.value;
      }else{
        this.Time = dateObj.startDate+'-'+dateObj.endDate;
      }
      this.getData();
    },
    // 商品类目
    getProCategories() {
      return this.$axios({
        method: 'get',
        url: '/api/product/GetProCategoriesNew'
      })
        .then(response => {
          if (response.data.code == 0) {
            this.list = response.data.data;
            this.goodslist = response.data.data.map((item, index) => {
              return item.categoryName;
            });
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    // 获取数据
    getData() {
      let that = this;
      this.loading = true;
      this.loading_01 = true;
      this.permissions = false;
      this.finished = false;
      this.isQzss = Boolean(this.valueSerach);
      // 商品类目
      this.$axios
        .post('/api/live/PostLiveProductRank', {
          Procategory: this.CategoryId,
          RankType: this.RankType,
          Time: this.Time,
          Keyword: this.valueSerach ? this.valueSerach : '',
          Index: this.page,
          Size: this.pageSize
        })
        .then(res => {
          if (res.data.code == 0) {
            this.loading_01 = false;
            this.loading = false;
            this.goodslist1 = this.goodslist1.concat(res.data.data.ranks);
            this.count = res.data.data.totalCount;
            if (res.data.data.ranks.length < this.pageSize) {
              this.finished = true;
            } else {
              this.finished = false;
            }
          } 
          if (res.data.code == 1003 || res.data.code1 == 1013) { //code1:1013个数权限不够 - code1专门给前端用
            this.permissions = true;
            this.loading = false;
            this.loading_01 = false;
            this.finished = true;
          }
        })
        .catch(err => {
          this.loading_01 = false;
          console.log(err);
        });
    },

    onLoad() {
      // if (this.page * this.pageSize > this.goodslist1.length) {
      //   this.loading = false;
      //   this.finished = ture;
      // } else if (this.goodslist1.length) {
      //   this.loading = true;
      //   this.page = this.page + 1;
      //   this.getData();
      // }
      if(!this.finished){
        this.loading = true;
        this.page = this.page + 1;
        this.getData();
      }
    },
    search(i) {
      this.valueSerach = i;
      this.page = 1;
      this.goodslist1 = [];
      this.keyword = i;
      this.getData();
    },
    search1(i) {
      // this.page=1
      // this.goodslist1 = [];
      this.keyword = i;
    }
  }
};
</script>
<style lang="stylus" scoped>
@import '~@/common/list_public.styl';
//@import url();
#liveGoodsRank {
  background: #f1f1f1;
  // min-height: 100vh;
  overflow: hidden;
  margin-bottom: 1.62rem;
  .van-list__finished-text {
    padding-bottom: 2rem;
  }
  a {
    text-decoration: none;
  }
  .box {
    width: 9.2rem;
    height: 2.4rem;
    padding-top: 0.306667rem;
    background-color: #ffffff;
    border-radius: 0.133333rem;
    display: flex;
    margin: auto;
    margin-bottom: 0.2rem;
    padding-bottom: 0.073667rem;
    .boxleft {
      position: relative;
      margin-left: 0.173333rem;
      margin-left: 0.266667rem;
      .rank1 {
        background: #f1f1f1;
        height: 0.466667rem;
        line-height: 0.58rem;
        border-radius: 0.226667rem;
        position: absolute;
        top: -0.183333rem;
        left: -0.133333rem;
        font-size: 0.373333rem;
        padding-left: 0.12rem;
        padding-right: 0.12rem;
        text-align: center;
        font-family: DINPro-Medium;
        color: #666666;
      }
      .rank {
        position: absolute;
        top: -0.19rem;
        left: -0.19rem;
        z-index: 1;
        width: 0.62rem;
        height: 0.52rem;
        background: url(../../../assets/two/fire.png) no-repeat center;
        background-size: 100% 100% !important;
        box-sizing: 100%;

        p {
          font-family: DINPro-Medium;
          font-size: 0.373333rem;
          color: #666666;
          text-align: center;
          line-height: 0.56rem;
        }
      }
      .img_01 {
        width: 2.133333rem;
        height: 2.133333rem;
        // background-color: #ff7500;
        border-radius: 0.266667rem;
        border: solid 1px #e5e5e5;
      }
    }
    .boxright {
      margin-left: 0.266667rem;
      font-size: 0.4rem;
      color: #222222;
      .boxrightTop {
        margin-top: 0.106667rem;
        position: relative;
        #SourceIcon {
          position: absolute;
          left: 0;
          top: 0;
          margin-top: 0.04rem;
        }
        .tit_01 {
          width: 5.5rem;
          font-size: 0.4rem;
          line-height: 0.48rem;
          color: #222222;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          margin-left: 0.53333rem;
        }
        .price {
          padding-top: 0.063333rem;
          span {
            font-size: 0.346667rem;
            color: #ff0000;
          }
          font-family: DINPro-Medium;
          font-size: 0.48rem;
          // font-weight: 600;
          color: #ff0000;
        }
      }
      .num {
        display: flex;
        .two {
          width: 1.893333rem;
          p {
            font-size: 0.373333rem;
            // font-weight: 600;
            color: #222222;

            &:nth-child(1) {
              font-family: Dinpro-medium;
            }
            &:nth-child(2) {
              font-size: 0.293333rem;
              color: #888888;
            }
          }
        }
      }
    }
  }
  .bot {
    // text-align: center;
    display: flex;
    width: 9.2rem;
    height: 0.88rem;
    line-height: 0.88rem;
    background-color: #f4f9ff;
    border-radius: 0.44rem;
    border: solid 0.02rem #1779ff;
    margin: 0 auto;
    // margin-bottom: 0.266667rem;
    margin-bottom: 1.506667rem;
    p {
      margin-left: 0.6rem;
      font-size: 0.346667rem;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 1px;
      color: #222222;
    }
    a {
      font-size: 0.346667rem;
      color: #1779ff;
    }
  }
  .bottom_Collection {
    width: 100%;
    text-align: center;
    img {
      margin: 0 auto;
      width: 4rem;
      height: 3.2rem;
      margin-top: 4rem;
      display: block;
    }
    p {
      text-align: center;
      font-size: 0.3467rem;
      line-height: 0.4rem;
      color: #888888;
      span {
        color: #fd7f2c;
        margin-left: 0.1333rem;
      }
    }
  }
}
</style>
